<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<%-- <script type="text/javascript" src="${ctxStatic }/jquery-easyui/1.5.3/jquery.min.js"></script>
	<script type="text/javascript" src="${ctxStatic }/jquery-easyui/1.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctxStatic }/jquery-easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctxStatic }/jquery-easyui/1.5.3/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="${ctxStatic }/jquery-easyui/1.5.3/themes/icon.css" />
	<link rel="stylesheet" type="text/css" href="${ctxStatic }/jquery-easyui/1.5.3/demo/demo.css" />--%>

<link rel="stylesheet" type="text/css"
	href="${ctxStatic }/common/workOrderForm.css" />

<%-- <link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
	src="${ctxStatic}/jquery-validation/1.11.1/dist/jquery.validate.min.js"></script>
 --%>
<title>待处理工单</title>
<meta name="decorator" content="default" />
<script type="text/javascript">
	$(document).ready(
			function() {
				$("#inputForm")
						.validate(
								{
									submitHandler : function(form) {
										loading('正在提交，请稍等...');
										form.submit();
									},
									errorContainer : "#messageBox",
									errorPlacement : function(error, element) {
										$("#messageBox").text("输入有误，请先更正。");
										if (element.is(":checkbox")
												|| element.is(":radio")
												|| element.parent().is(
														".input-append")) {
											error.appendTo(element.parent()
													.parent());
										} else {
											error.insertAfter(element);
										}
									}
								});
			});
			
	
	/* function fileTool() {
		var userId = ${workOrder.belong};
		var a = document.getElementsByName(userId);
		for (var i=0; i<a.length; i++) {
			a[i].className = 'filex01';
			}
		console.log(a.length);
	} */
	
	
	$(function() {
		autoNav();
	});

	//解决底部自动导航的问题  
	function autoNav() {
		//获取内容的高度  
		var bodyHeight = $("body").height();
		//获取底部导航的高度  
		var navHeight = $("#info-footer").height();
		//获取左边内容的宽度  
		var leftWidth = $("#info-left").width();
		//获取左边内容的高度  
		var leftHeight = $("#info-left").height();
		//获取显示屏的高度  
		var iHeight = document.documentElement.clientHeight
				|| document.body.clientHeight;
		console.log("bodyHeight"+bodyHeight+"navHeight"+navHeight+"leftHeight"+leftHeight+"iHeight"+iHeight);
		//如果内容的高度大于（窗口的高度 - 导航的高度）,z则需要添加一个div，设置其高度  
		if (iHeight < (leftHeight + navHeight +73)) {
			//$("body").append('<div style="height: '+navHeight+'px"></div>');
			document.getElementById("info-left").style.height = iHeight-navHeight-73 + "px";
			//document.getElementById("foot-btn").style.width = leftWidth + "px"; 
			
		}
	}
</script>
<style type="text/css">
.filex{
	display: none;
}
.filex01{
	display: inline;
}

</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/oa/workOrder/allList">工单查询</a></li>
		<li class="active"><a href="${ctx}/oa/workOrder/show?id=${workOrder.id}">工单查看</a></li>
	</ul>
	<br />

	<div id="info-main" class="row-fluid" style="font-size: 10px;">
		
		<div id="info-left" class="pre-scrollable" style="padding-left: 10px;padding-right: 10px;max-height: 567px;">
			<div class = "panel-head-01" >用户信息</div>
			<div>
				<table>
					<tr>
						<td class="table-name-01">客户姓名：</td>
						<td class="table-value-01"><input class="table-input-01" readonly="readonly"
						class="required input-small" value="${workOrder.customerName }"></td>
						<td class="table-name-01" style="white-space: nowrap;">客户电话：</td>
						<td class="table-value-01"><input class="table-input-01" readonly="readonly"
							value="${workOrder.customPhone }"></td>
						<td class="table-name-01" style="white-space: nowrap;">客户品牌：</td>
						<td class="table-value-01"><input class="table-input-01" readonly="readonly"
							value="${workOrder.customBrand }"></td>
						<td class="table-name-01">客户级别：</td>
						<td class="table-value-01"><input class="table-input-01" readonly="readonly"
							value="${workOrder.customLevel }"></td>
						<td class="table-name-01">用户归属地：</td>
						<td class="table-value-01"><input class="table-input-01" readonly="readonly"
							value="${workOrder.customAttribution }"></td>
					</tr>
				</table>
			</div>
			<div class = "panel-head-01">基本信息</div>
			<div>
				<table>
					<tr>
						<td class="table-name-02">主题：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.title }"></td>
						<td class="table-name-02">紧急程度：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.urgentDegree }"></td>
						<td class="table-name-02" >受理时限：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="<fmt:formatDate value="${workOrder.dealTime1 }" type="both"/>"></td>
						<td class="table-name-02">处理时限：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="<fmt:formatDate value="${workOrder.dealTime2 }" type="both"/>"></td>	
						<td class="table-name-02">派发联系人：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.bdeptContact }"></td>
						
					</tr>
					<tr>
						
						<td class="table-name-02">派发联系人电话：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.bdeptContactPhone }"></td>
						<td class="table-name-02">投诉分类：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.title }"></td>
						<td class="table-name-02">投诉时间：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="<fmt:formatDate value="${workOrder.complaintTime }" type="both"/>"></td>
						<td class="table-name-02">故障号码：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.complaintNum }"></td>
						<td class="table-name-02">故障时间：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="<fmt:formatDate value="${workOrder.faultTime }" type="both"/>"></td>
					</tr>
					<tr>
						
						<td class="table-name-02">故障地点：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.faultSite }"></td>
						<td class="table-name-02">终端描述：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.terminalType }"></td>
						<td class="table-name-02">重复投诉次数：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.repeatComplaintTimes }"></td>
						<td class="table-name-02">是否大面积投诉：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.bdeptContactPhone }"></td>
						<td class="table-name-02">预处理情况：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.preDealResult }"></td>
					</tr>
					<tr>
						<td class="table-name-02">投诉内容：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.complaintDesc }"></td>
						<td class="table-name-02">投诉受理省份：</td>
						<td class="table-value-02"><input class="table-input-02" readonly="readonly"
							value="${workOrder.startDealCity }"></td>
					</tr>
				</table>
			</div>
			
			<div class = "panel-head-01" >操作日志</div>
			<div class="" style="">	
				<table class="table">
					<c:forEach items="${operationList}" var="operation">
						<tr id="${operation.id}" style="background-color: aliceblue;">
							<td><div>操作人：${operation.operationUser }</div></td>
							<td><div>操作：${operation.operationName }</div></td>
							<td><div>操作时间：<fmt:formatDate value="${operation.operationTime }" type="both" /></div></td>
							<td><div>去向：${operation.sendTo }</div></td>
							
						</tr>
						<tr>
							<td colspan="4"><div>消息：${operation.content }</div></td>
						</tr>
						
					</c:forEach>
				</table>
			</div>
		</div>
		
		<div id="footer" class="row-fluid navbar-fixed-bottom"	style="font-size: 10px;">
		<div id="info-footer" class="panel panel-info span12 pre-scrollable " >
			<div class="panel-heading" style="background-color: #2fa4e7;">
				<ul id="myTab" class="nav nav-tabs">
					<li class="active"><a href="#home" data-toggle="tab" style="color: #033c73;">查询客服处理流程</a></li>
					<li><a href="#file" data-toggle="tab" style="color: #033c73;">文档附件</a></li>
				</ul>
			</div>
	
			<div class="panel-body" style="">
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane fade in active" id="home">
						<sys:message content="${message}" />
						<table class="table"  style="background-color: aliceblue;">
							<c:forEach items="${pfList}" var="pf">
								<tr>
									<td><div>处理人：${pf.processDealStaff }</div></td>
									<td><div>处理人联系方式：${pf.staffContactPhone }</div></td>
									<td><div>处理人部门：${pf.processDealOrgaName }</div></td>
									<td><div>处理时间：${pf.processDealTime }</div></td>
									<td><div>处理意见：${pf.processDealComment }</div></td>
								</tr>
							</c:forEach>
						</table>
						<div id="my-form-actions" class="form-actions" style="margin-top: 0px;">
							<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)" />
						</div>
					</div>
					
					<div class="tab-pane fade" style="" id="file">
						<table class="table">
							<form:form id="inputForm" modelAttribute="workOrder"
								action="${ctx}/oa/workOrder/uploadFile?id=${workOrder.id}"
								method="post" class="form-horizontal">
								<sys:message content="${message}" />
								<div class="control-group">
									<label class="control-label">附件:</label>
									<div class="controls">
										<form:hidden id="nameFile" path="files" htmlEscape="false"
											maxlength="255" class="input-xlarge" />
										<sys:ckfinder input="nameFile" type="files"
											uploadPath="/userfiles" selectMultiple="true" maxWidth="100"
											maxHeight="100" />
									</div>
								</div>
								<div id="my-form-actions" class="form-actions" style="margin-top: 0px;">
									<input id="btnSubmit" class="btn btn-primary" type="submit"
										value="保  存" />&nbsp; <input id="btnCancel" class="btn"
										type="button" value="返 回" onclick="history.go(-1)" />
								</div>
							</form:form>
						</table>
					</div>
				</div>
			</div>
		</div>
		</div>		
	</div>
	
</body>
</html>